<template>
  <view class="container">
		<view :style="'height:'+statusbarH+'px'"></view>
		<view class="u-search-flex">
			<!-- <u-icon @click="gotoproFun" name="map-fill" color="#2979ff"></u-icon>
			<span @click="gotoproFun" class="addr_font">北京</span> -->
			<u-search placeholder="搜索医生" v-model="keyword" :showAction="false" shape="round"  @search="searchFun"></u-search>
			<!-- <u-icon class="chat_left" name="chat" color="#2979ff"></u-icon> -->
		</view>
		{{ hospitalLevel }}
		<view class="buttons_flex">
			<Picker title="医院等级" v-model="hospitalLevel" url="system/dict/data/type/new_hospital_level" dataType="data" name="dictLabel" @refreshfun="refreshFun"></Picker>
			<Picker title="医院类型" v-model="hospitalType" url="system/dict/data/type/new_hospital_type" dataType="data" name="dictLabel"  @refreshfun="refreshFun"></Picker>
			<Picker title="医院"  v-model="hospitalId" url="base/hospital/list" dataType="rows" name="name" @refreshfun="refreshFun" valueType="id"></Picker>
			<Picker title="科室"  v-model="departmentId" url="base/department/list" dataType="rows" name="name" @refreshfun="refreshFun" valueType="id"></Picker>
		<!-- 	<view class="button_bgcolor" @click="switchDepartmentFun">
				科室
				<span>
					<u-icon name="tags-fill" color="rgb(221, 221, 221)" size="10"></u-icon>
				</span>
			</view> -->
		</view>
		<view class="province">
			<scroll-view scroll-y="true" style="height: 100%" bindscrolltoupper="upper" @scrolltolower="lower" :lower-threshold="300">
				<u-empty style="margin-top: 100rpx;" v-if="!doctorList.length" text="暂无数据" mode="list"></u-empty>
				<view class="items_box" v-for="(item, index) in doctorList" :key="index" @click.stop="goTovixFun(item)">
					<view class="img_flex">
				<!-- 		<view style="width: 260rpx;height: 150rpx;">
							<image style="width: 260rpx;height: 150rpx;" src="../../static/order/status/wait_receipt.png" mode="aspectFit"></image>
						</view> -->
						<view style="width: 100%;">
							<view class="font_w">
								<view>
									<span style="font-size: 34rpx">{{ item.name }} </span> 
									<span style="margin-left: 10rpx;"> {{ item.position }}</span>
								</view>
								<!-- <view class="chek">查看</view> -->
							</view>
							<view class="time_flex">
								<view>
									<view class="mar_20"><span style="font-size: 30rpx;margin-right: 20rpx;">{{ item.hospitalName }}</span>  <span>{{ item.departmentName }}</span></view>
									<!-- <view>擅长：{{ item.specialField }}</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="toTheEnd" class="" style="color: gray;margin: 20rpx 0;text-align: center;font-size: 26rpx;">
					我到底了~
				</view>
			</scroll-view>
		</view>
		<!-- <u-picker :show="show" v-if="show" :columns="columns" keyName="name" @confirm="confirm"></u-picker> -->
  </view>
</template>
<script>
		import { medicalRepresentative, getbyuser } from "@/api/login/index.js"
	import { getHospitalList, getagencylList } from '@/api/category.js' 
  export default {
    data() {
			return {
				totals: 0,
				toTheEnd: false,
				pageNum: 1,
				departmentId: '',
				hospitalId: '',
				hospitalType: '',
				hospitalLevel: '',
				doctorList: [],
				show: false,
				statusbarH: 0,
				keyword: '',
				ispro: '1',
				current: 0,
				columns: [
					['中国', '美国', '日本']
				],
			}
    },
		onShow() {
			uni.getSystemInfo({
					success:(e)=> {
					this.statusbarH = e.statusBarHeight;
				}
			})
			if(!uni.getStorageSync('userInfoRole')) return;
			this.getHospitalListFuns();
			((JSON.parse(uni.getStorageSync('userInfo')).userType == '02')? medicalRepresentative : getbyuser)(JSON.parse(uni.getStorageSync('userInfo')).userId).then((resmin) => {
				uni.setStorage({
					key: 'userInfoRole',
					data: JSON.stringify(resmin.data)
				})
			})
		},
		onUnload() {
			uni.$off('refreshfun');
		},
		created() {
			if(!uni.getStorageSync('userInfoRole')) return
			uni.$on('refreshfun',(datas)=>{
				// this.getList();
				if (datas.type == '医院等级') {
					this.hospitalLevel = datas.data
				} else if (datas.type == '医院类型') {
					this.hospitalType = datas.data
				} else if (datas.type == '医院') {
					this.hospitalId = datas.data
				} else if (datas.type == '科室') {
					this.departmentId = datas.data
				}
				// this.getHospitalListFun()
				
			})
		},
		methods: {
			lower(e) {
				if (this.doctorList.length >= this.totals) {
					this.toTheEnd = true
					return
				}
				if (!this.doctorList.length) {
					this.toTheEnd = false
				}
				this.pageNum = this.pageNum+1
				this.getHospitalListFuns('add')
			},
			searchFun() {
				this.getHospitalListFuns()
			},
			// uni.setStorage({
			// 	key: 'userInfo',
			// 	data: JSON.stringify(datas.data.sysUser)
			// })
			getHospitalListFuns(add) {
				if (!add) {
					this.doctorList = []
					this.pageNum = 1
					this.toTheEnd = false
				}
				(JSON.parse(uni.getStorageSync('userInfo')).userType == '02'?getHospitalList : getagencylList)({
					hospitalLevel: this.hospitalLevel,
					hospitalType: this.hospitalType,
					hospitalId: this.hospitalId,
					departmentId: this.departmentId,
					name: this.keyword,
					pageNum: this.pageNum,
					pageSize: 10,
					isDeleted: 0,
				}).then((res) => {
					this.doctorList = [...this.doctorList, ...res.data]
					this.totals = res.total
				})
			},
			switchDepartmentFun() {
				uni.navigateTo({
					url: "/pages/category/switchDepartment"
				})
			},
			picFun() {
				this.show = true
			},
			confirm(e) {
				this.show = false
			},
			goTovixFun(type) {
				// uni.navigateTo({
				// 	url:type == 1? "/pages/task/researchTask/index" : "/pages/task/visitTask/index"
				// })
			},
			proFun(val) {
				this.ispro = val
			},
			sectionChange(index) {
				this.current = index;
			},
			goToRequestFun(type) {
				uni.navigateTo({
					url:type == 1? "/pages/task/research/index" : "/pages/task/taskRequest/index"
				})
			},
		}
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: hidden;
		padding: 0 20rpx;
		box-sizing: border-box;
		// margin-top: 20rpx;
	}
	.pro_list {
		padding: 20rpx 50rpx;
		box-sizing: border-box;
	}
	.pro_list_is {
		background-color: #f7f8ff;
		color: #2979ff;
		position: relative;
	}
	.pro_list_is::before {
		content: '';
		display: block;
		width: 10rpx;
		height: 50rpx;
		background-color: #2979ff;
		position: absolute;
		left: -20rpx;
	}
	.u-search-flex {
		display: flex;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.addr_font {
		color: gray;
		font-size: 25rpx;
		margin: 0 10rpx;
		margin-right: 20rpx;
	}
	.chat_left {
		margin-left: 20rpx;
	}
	.items_box {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.time_flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: gray;
			.mar_20 {
				margin: 15rpx 0;
				color: black;
				font-weight: 400;
				display: flex;
				align-items: center;
			}
		}
		.font_w {
			width: 100%;
			font-weight: 900;
			color: #111;
			display: flex;
			font-size: 26rpx;
			justify-content: space-between;
			.chek {
				background-color: #2979ff;
				color: #fff;
				border-radius: 100rpx;
				padding: 5rpx 10rpx;
			}
		}
		.button_color {
			background-color: #2979ff;
			color: #fff;
			padding: 15rpx 40rpx;
			box-sizing: border-box;
			border-radius: 100rpx;
		}
	}
	.img_flex {
		display: flex;
		align-items: center;
	}
	.button_bgcolor {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160rpx;
		background-color: #fff;
		border-radius: 7rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	.buttons_flex {
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
</style>
